<template>
  <div id="main3" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: {
              lineStyle: {
                color: '#55afdc'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#55afdc'
              }
            }
          }
        ],
        series: [
          {
            name: '单选题',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [79, 52, 200, 334, 390, 330, 220]
          },
          {
            name: '多选题',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [80, 52, 200, 334, 390, 330, 220]
          },
          {
            name: '解答题',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [30, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
  },
  mounted() {
    var chartDom = document.getElementById('main3')
    var myChart = echarts.init(chartDom)
    this.option && myChart.setOption(this.option)
  }
}
</script>

<style></style>
